<template>
  <div v-if="appName">
    <navbar />
    <TopBanner />
    <div class="container">
      <section>
        <h2><span>{{ appTitle }}</span></h2>
        <component :is="appName" />
      </section>

    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Navbar from './components/ApplicationNavBar'
import TopBanner from './components/TopBanner.vue'

export default {
  name: 'ApplicationDetail',
  components: {
    Navbar,
    PIR: () => import('./components/PIR.vue'),
    PSI: () => import('./components/PSI.vue'),
    reasoning: () => import('./components/reasoning.vue'),
    ADPrediction: () => import('./components/ADPrediction.vue'),
    UserPortrait: () => import('./components/UserPortrait.vue'),
    TopBanner
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState('application', [
      'appTitle'
    ])
  },
  created() {
    this.appName = this.$route.params.name || ''
    this.getAppInfo(this.appName)
  },
  methods: {
    init() {
      this.appName = this.$route.params.name || ''
      const currentApplication = this.data.find(item => item.appName === this.appName)
      this.appTitle = currentApplication?.appTitle
    },
    ...mapActions('application', [
      'getAppInfo'
    ])
  }
}
</script>

<style lang="scss" scoped>
.container{
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #f0f2f5;
  padding: 0 20px 20px 20px;
  section{
    background-color: #fff;
    width: 1000px;
    margin: 20px auto;
    padding: 50px 30px;
  }
  .icon{
    width: 91px;
    height: 100px;
    background: url() no-repeat;
    background-size: contain;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
